<template>
  <div>
    <mt-header title="合同添加" style="background-color: #ee9900">
      <div slot="left" title="合同添加">
        <mt-button icon="back" @click="back">返回</mt-button>
      </div>
    </mt-header>
    <my-step :currentVal="currentVal" :step-array="title"></my-step>

    <mt-field
      label="合同类型"
      placeholder="请选择"
      v-model="formData.contractTypeName"
      @click.native="showContract"
    ></mt-field>
    <mt-popup v-model="contractVisible" position="bottom" popup-transition="popup-fade" :closeOnClickModal="false"
              style=" width: 100%">
      <div
        style=" display: flex;  flex-direction: row;justify-content: space-around; height: 40px; line-height: 40px;font-size: 16px;">
                                
        <div class="cancel" @click="contractVisible = !contractVisible" style=" color: #FF6600">取消</div>
                                
        <div class="">请选择合同类型</div>
                                
        <div class="sure" @click="contractVisible = !contractVisible">确定</div>
                            
      </div>
      <mt-picker :slots="contractArray" @change="contractChange" valueKey="name">
      </mt-picker>


    </mt-popup>
    <div id="information" v-show="currentVal == 1">
      <h3 style="padding: 3%">|人员信息</h3>

      <mt-field label="出租人" placeholder="出租人" v-model="formData.leaser"></mt-field>
      <mt-field label="身份证" placeholder="身份证" type="email" v-model="formData.identityCard"></mt-field>
      <mt-field label="联系地址" placeholder="联系地址" type="password" v-model="formData.contactAddress"></mt-field>
      <mt-field label="承租人" placeholder="承租人" v-model="formData.tenant"></mt-field>
      <mt-field label="身份证" placeholder="身份证" v-model="formData.tenantCard"></mt-field>
      <mt-field label="联系地址" placeholder="联系地址" v-model="formData.tenantAddress"></mt-field>
      <mt-field label="家庭联系人" placeholder="家庭联系人" type="datetime" v-model="formData.familyContact"></mt-field>
      <mt-field label="联系电话" placeholder="联系电话" v-model="formData.contactPhone"></mt-field>
      <mt-field label="关系" placeholder="关系" v-model="formData.relatio"></mt-field>

      <h3 style="padding: 3%">|房屋信息</h3>
      <mt-field label="房屋" placeholder="房屋" v-model="formData.house"></mt-field>
      <mt-field label="小区" placeholder="小区" type="email" v-model="formData.housingEstate"></mt-field>
      <mt-field label="地址" placeholder="地址" v-model="formData.houseAddress"></mt-field>
      <mt-field label="房间" placeholder="房间" v-model="formData.houseRoom"></mt-field>
      <mt-field
        label="承租类型"
        placeholder="请选择"
        v-model="formData.tenantTypeName"
        aria-readonly="true"
        v-on:click.native="showType"
      ></mt-field>

      <mt-popup v-model="popupVisible" position="bottom" style="width: 100%">
        <!-- <div style="float: left"> 确定</div>  <div style="float: right"> 取消  </div>-->
        <mt-picker :slots="slots" @change="onValuesChange" valueKey="name"></mt-picker>
      </mt-popup>

      <mt-field
        label="卫生间"
        placeholder="请选择"
        v-on:click.native="showToile"
        v-model="formData.toileTypeName"
        aria-readonly="true"
      ></mt-field>
      <mt-popup v-model="toileVisible" position="bottom" style="width: 100%">
        <!-- <div style="float: left"> 确定</div>  <div style="float: right"> 取消  </div>-->
        <mt-picker
          :slots="toiletArray"
          @change="onToileChange"
          valueKey="name"
          aria-readonly="true"
        ></mt-picker>
      </mt-popup>
      <mt-field
        label="套间"
        placeholder="请选择"
        v-on:click.native="showSuit"
        v-model="formData.suitTypeName"
        aria-readonly="true"
      ></mt-field>
      <mt-popup v-model="suitVisible" position="bottom" style="width: 100%">
        <!-- <div style="float: left"> 确定</div>  <div style="float: right"> 取消  </div>-->
        <mt-picker :slots="suitArray" @change="onSuitArrayChange" valueKey="name"></mt-picker>
      </mt-popup>
      <div class="steps-action">
        <mt-button
          v-if="currentVal <= title.length "
          type="primary"
          @click="next"
          size="large"
          style="margin-bottom: 10px"
        >下一步
        </mt-button>
        <mt-button
          size="large"
          v-if="currentVal == title.length+1"
          type="primary"
          @click="$message.success('已经到底了')"
        >提交
        </mt-button>

        <mt-button v-if="currentVal>0" size="large" style @click="prev" type="default">上一步</mt-button>

        <!--
              <mt-actionsheet
                :actions="data"
                v-model="sheetVisible">
              </mt-actionsheet>

              <mt-actionsheet
                :actions="data"
                v-model="sheetVisible">
        </mt-actionsheet>-->

        <!-- <mt-datetime-picker
           v-model="formData.brithday"
           type="date"
           year-format="{value} 年"
           month-format="{value} 月"
           date-format="{value} 日">
           @confirm="confirmDate"
        </mt-datetime-picker>-->
      </div>
    </div>

    <div id="lease" v-show="currentVal == 2">
      <h3 style="padding: 3%">|租约时间</h3>

      <mt-field label="租聘期" placeholder="出租人" v-model="formData.leasehold"></mt-field>
      <mt-field label="起始时间" placeholder="起始时间" type="date" v-model="formData.leaseholdStartdate"></mt-field>
      <mt-field label="截止时间" placeholder="联系地址" type="date" v-model="formData.leaseholdEnddate"></mt-field>
      <mt-field label="交房时间" placeholder="承租人" type="date" v-model="formData.leaseholdCheckdate"></mt-field>

      <h3 style="padding: 3%">|租金信息</h3>
      <mt-field label="租金标准" placeholder="房屋" v-model="formData.rentStandard">
        <span>元整/月</span>
      </mt-field>
      <mt-field label="支付方时间" placeholder="支付方时间" type="email" v-model="formData.rentPaydate"></mt-field>
      <mt-field label="支付周期" placeholder="支付周期" type="password" v-model="formData.rentPeriodtype"></mt-field>
      <mt-field label="支付金额" placeholder="支付金额" type="num" v-model="formData.rentMoney"></mt-field>

      <div class="steps-action">
        <mt-button
          v-if="currentVal <= title.length "
          type="primary"
          @click="next"
          size="large"
          style="margin-bottom: 10px"
        >下一步
        </mt-button>
        <mt-button
          size="large"
          v-if="currentVal == title.length +1"
          type="primary"
          @click="$message.success('已经到底了')"
        >提交
        </mt-button>

        <mt-button v-if="currentVal>0" size="large" style @click="prev" type="default">上一步</mt-button>
      </div>
    </div>

    <div id="pay" v-show="currentVal == 3">
      <h3 style="padding: 3%">|支付途径</h3>

      <mt-field label="甲方开户银行" placeholder="甲方开户银行" v-model="formData.payBank"></mt-field>
      <mt-field label="户名" placeholder="户名" type="email" v-model="formData.payUsername"></mt-field>
      <mt-field label="银行账号" placeholder="银行账号" type="password" v-model="formData.payBankaccount"></mt-field>
      <mt-field label="微信号" placeholder="微信号" type="tel" v-model="formData.payWechat"></mt-field>
      <mt-field label="支付宝账号" placeholder="支付宝账号" type="tel" v-model="formData.payAlipay"></mt-field>

      <h3 style="padding: 3%">|房间信息</h3>
      <mt-field label="押金" placeholder="押金" v-model="formData.houseinfoCash"></mt-field>
      <mt-field label="门禁卡押金" placeholder="门禁卡押金" type="email" v-model="formData.houseinfoDeposit"></mt-field>
      <mt-field
        label="物业服务费"
        placeholder="物业服务费"
        type="password"
        v-model="formData.houseinfoCharge"
      ></mt-field>
      <mt-field label="水费" placeholder="水费" type="tel" v-model="formData.houseinfoWater"></mt-field>
      <mt-field label="电费" placeholder="电费" type="tel" v-model="formData.houseinfoElectric"></mt-field>

      <mt-field label="其他费用" placeholder="其他费用" type="tel" v-model="formData.houseinfoOther"></mt-field>
      <mt-field label="补充约定" placeholder="补充约定" v-model="formData.houseinfoAgreement"></mt-field>
      <div class="steps-action">
        <mt-button
          v-if="currentVal <= title.length "
          type="primary"
          @click="next"
          size="large"
          style="margin-bottom: 10px"
        >下一步
        </mt-button>
        <mt-button
          size="large"
          v-if="currentVal == title.length+1"
          type="primary"
          @click="$message.success('已经到底了')"
        >提交
        </mt-button>

        <mt-button v-if="currentVal>0" size="large" @click="prev" type="default">上一步</mt-button>
      </div>
    </div>
    <div id="houseInfo" v-show="currentVal == 4">
      <h3 style="padding: 3%">|房屋配置清单</h3>
      <mt-field label="窗帘 (匹)" type="number" v-model="formData.houseinfoCurtain"></mt-field>
      <mt-field label="热水器(台)" type="number" v-model="formData.houseinfoWaterheater"></mt-field>
      <mt-field label="抽油烟机(台)" placeholder type="number" v-model="formData.houseinfoKitchen"></mt-field>
      <mt-field label="床(张)" type="number" v-model="formData.houseinfoBed"></mt-field>
      <mt-field label="床垫(张)" type="number" v-model="formData.houseinfoMattress"></mt-field>
      <mt-field label="衣柜(个)" type="number" v-model="formData.houseinfoChest"></mt-field>
      <mt-field label="空调(台)" type="number" v-model="formData.houseinfoCondition"></mt-field>
      <mt-field label="洗衣机(台)" type="number" v-model="formData.houseinfoMachine"></mt-field>
      <mt-field label="冰箱(台)" type="number" v-model="formData.houseinfoFreezer"></mt-field>
      <mt-field label="电脑桌(个)" type="number" v-model="formData.houseinfoDesk"></mt-field>
      <mt-field label="凳子/椅子(张)" type="number" v-model="formData.houseinfoChair"></mt-field>
      <mt-field label="沙发(张)" type="number" v-model="formData.houseinfoSofa"></mt-field>
      <mt-field label="茶几(个)" type="number" v-model="formData.houseinfoTable"></mt-field>
      <div class="steps-action">
        <mt-button
          v-if="currentVal <= title.length "
          type="primary"
          @click="next"
          size="large"
          style="margin-bottom: 10px"
        >下一步
        </mt-button>
        <mt-button
          size="large"
          v-if="currentVal == title.length+1"
          type="primary"
          @click="$message.success('已经到底了')"
        >提交
        </mt-button>

        <mt-button v-if="currentVal>0" size="large" style @click="prev" type="default">上一步</mt-button>
      </div>
    </div>
    <div id="sign" v-show="currentVal == 5">
      <h3 style="padding: 3%">|签名</h3>
      <sigh-piecture
        :showColor="false"
        @click.native="initSigh"
        ref="SighPiecture"
        @onComplete="getLessImage"
      ></sigh-piecture>

      <mt-cell title="出租方">
        <img :src="formData.signLessor"/>
      </mt-cell>
      <!-- <mt-popup
         v-model="popupVisible">

         <sigh-piecture :imgUrl=""></sigh-piecture>
      </mt-popup>-->
      <!--<sigh-piecture :showColor="false" @onComplete="getTenantryImage"></sigh-piecture>
      <mt-cell title="承租方">
        <img :src="formData.signTenantry"/>
      </mt-cell>-->

      <mt-field label="签署日期" type="date"></mt-field>
      <div class="steps-action">
        <mt-button
          v-if="currentVal <= title.length "
          type="primary"
          @click="next"
          size="large"
          style="margin-bottom: 10px"
        >下一步
        </mt-button>
        <mt-button
          size="large"
          v-if="currentVal == title.length +1"
          type="primary"
          @click="submitToContract"
          style="margin-bottom: 10px"
        >提交
        </mt-button>

        <mt-button v-if="currentVal>0" size="large" style @click="prev" type="default">上一步</mt-button>
      </div>
    </div>
    <a-input type="hidden" v-model="formData.tenantType"></a-input>
    <a-input type="hidden" v-model="formData.signTenantry"></a-input>
    <a-input type="hidden" v-model="formData.suitType"></a-input>

    <a-input type="hidden" v-model="formData.contractType"></a-input>
  </div>
</template>

<script>
    import * as mint from 'mint-ui'
    import myStep from '../../../components/step/MyStep'
    import SighPiecture from '../../../components/SighPicture/SighPiecture'
    import {deleteAction, getAction, downFile, postAction} from '@/api/manage'
    import {formatDate} from '../../../utils/util'
    import {MessageBox} from 'mint-ui';

    export default {
        name: 'contractList',
        components: {
            ...mint,
            SighPiecture,
            MessageBox,

            myStep
        },
        data() {
            return {
                isWrite: false,
                popupVisible: false,
                toileVisible: false,
                suitVisible: false,
                leaserVisible: false,
                contractVisible: false,
                imageURL: '',
                slots: [
                    {
                        values: [{name: '套间', value: '1'}, {name: '单间', value: '2'}],
                        className: 'slot1',
                        textAlign: 'center'
                    }
                ],
                toiletArray: [
                    {
                        values: [{name: '卫生间在房间内', value: '1'}, {name: '卫生间在房间外', value: '2'}],
                        className: 'slot1',
                        textAlign: 'center'
                    }
                ],
                contractArray: [
                    {
                        values: [{name: '订金协议', value: '1'}, {name: '公寓租房', value: '2'}, {name: '整租房', value: '3'}],
                        className: 'slot1',
                        textAlign: 'center'
                    }
                ],

                suitArray: [
                    {
                        values: [{name: '一房一厅', value: '1'}, {name: '二房', value: '2'}],
                        className: 'slot1',
                        textAlign: 'center'
                    }
                ],

                sheetVisible: false,
                formData: {
                    contractTypeName: this.$route.query.row.name,
                    contractType: this.$route.query.row.value,
                    contactAddress: '',
                    contactPhone: '',
                    familyContact: '',
                    house: '',
                    houseAddress: '',
                    houseRoom: '',
                    houseinfoAgreement: '',
                    houseinfoBed: '',
                    houseinfoCash: '',
                    houseinfoChair: '',
                    houseinfoCharge: '',
                    houseinfoChest: '',
                    houseinfoCondition: '',
                    houseinfoCurtain: '',
                    houseinfoDeposit: '',
                    houseinfoDesk: '',
                    houseinfoElectric: '',
                    houseinfoElectrictype: '',
                    houseinfoFreezer: '',
                    houseinfoKitchen: '',
                    houseinfoMattress: '',
                    houseinfoOther: '',
                    houseinfoSofa: '',
                    houseinfoTable: '',
                    houseinfoWater: '',
                    houseinfoWaterheater: '',
                    houseinfoWatertype: '',
                    housingEstate: '',
                    identityCard: '',
                    leasehold: '',
                    leaseholdCheckdate: '',
                    leaseholdEnddate: '',
                    leaseholdStartdate: '',
                    leaser: '',
                    pactDate: '',
                    payAlipay: '',
                    payBank: '',
                    payBankaccount: '',
                    payUsername: '',
                    payWechat: '',
                    relatio: '',
                    rentMoney: '',
                    rentPaydate: '',
                    rentPeriodtype: '',
                    rentStandard: '',
                    signDate: '',
                    signLessor: '',
                    signTenantry: '',
                    status: '',
                    suitType: '',
                    tenant: '',
                    tenantAddress: '',
                    tenantCard: '',
                    tenantType: '',
                    toiletType: ''
                },
                currentVal: 1,
                title: ['步骤1', '步骤2', '步骤3', '步骤4'],
                url: {
                    list: '/phone/contractManagement',
                    add: '/phone/contractManagement/add'
                }
            }
        },
        methods: {
            next() {
                this.currentVal++
            },
            prev() {
                this.currentVal--
                if (this.currentVal == 0) {
                    this.currentVal = 1
                }
            },
            back() {
                window.history.go(-1)
            },
            contractChange(picker, values) {
                this.formData.contractType = values[0].value
                this.formData.contractTypeName = values[0].name
            },
            onValuesChange(picker, values) {
                this.formData.tenantType = values[0].value
                this.formData.tenantTypeName = values[0].name
            },
            onToileChange(picker, values) {
                this.formData.toileType = values[0].value
                this.formData.toileTypeName = values[0].name
            },
            onSuitArrayChange(picker, values) {
                this.formData.suitType = values[0].value
                this.formData.suitTypeName = values[0].name
            },
            showType() {
                this.popupVisible = !this.popupVisible
                console.log(this.popupVisible)
            },
            showSuit() {
                this.suitVisible = !this.suitVisible
            },
            showToile() {
                this.toileVisible = !this.toileVisible
            },
            showLeaser() {
                this.leaserVisible = true
            },
            initSigh() {
                if (!this.isWrite) {
                    console.log('初始化');
                    this.$refs.SighPiecture.initCanvas();
                    this.isWrite = true;
                }
            },
            getLessImage(value) {
                this.formData.signLessor = value
            },
            getTenantryImage(val) {
                this.formData.signTenantry = val
            },
            submitToContract() {
                postAction(this.url.add, this.formData).then(res => {
                    if (res.success) {
                        setTimeout(() => {
                            Toast({
                                message: '操作成功',
                                iconClass: 'icon icon-success'
                            });
                            this.$router.push('/phone/mine');
                        }, 1000);

                    } else {
                        MessageBox('提示', res.message);
                    }

                })
            },
            showContract() {
                this.contractVisible = !this.contractVisible
            }
        },
        mounted() {
            this.formData.suitType = ''
            this.formData.tenantType = ''
            this.formData.toileType = ''
            this.formData.contractType = this.$route.query.row.value
            this.formData.suitTypeName = ''
            this.formData.tenantTypeName = ''
            this.formData.toileTypeName = ''
            this.formData.contractTypeName = this.$route.query.row.name

        }, created() {
            console.log(this.$route.query.row.name)
            //this.contractVisible = true;
        }
    }
</script>

<style scoped>
  .steps-action {
    margin-top: 3%;
    padding: 2%;
  }

  .ant-layout-header {
    display: none;
  }


   .tbour_title {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     height: 40px;
     line-height: 40px;
     font-size: 16px;
  }

  .cancel {
     color: #FF6600;
  }

   .sure {
     color: #FF6600;
  }


</style>